<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<%@include file="header.jsp" %>
<link rel="stylesheet" href="../resources/home/css/shop_manager.css" type="text/css"/>
<link rel="stylesheet" href="../resources/home/css/shop_list.css" type="text/css"/>
<style type="text/css">
    .view{
        width:600px;
        height:550px;
        float: left;
        border:1px solid;
        background:#fe8502;
    }
    .talk_show{
        width:580px;
        height:420px;
        border:1px solid #666;
        background:#fff;
        margin:10px auto 0;
        overflow:auto;
    }
    .talk_input{
        width:580px;
        height: 200px;
        margin:10px auto 0;
    }
    .form-control{
        width: 400px;
    }
    .whotalk{
        width:80px;
        height:30px;
        float:left;
        outline:none;
    }
    .talk_word{
        width:300px;
        height:26px;
        padding:0px;
        float:left;
        margin-left:10px;
        outline:none;
        text-indent:10px;
    }
    #sub{
        width:56px;
        height:30px;
        float:left;
        margin-left:10px;
    }
    .litalk{
        margin:10px;

    }
    .litalk span{
        display:inline-block;
        background:#0181cc;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }
    .wangtalk{
        margin:10px;
        text-align:right;
    }
    .wangtalk span{
        display:inline-block;
        background:#ef8201;
        border-radius:10px;
        color:#fff;
        padding:5px 10px;
    }

    #clear{
        left: 200px;
        top: 400px;
    }
    #liimg{
        width: 50px;
        height: 50px;
    }
    #wangimg{

        width: 50px;
        height: 50px;
    }
    .op{
        margin-left: 10px;
        height: 50px;
        width: 100px;
    }

</style>
<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">
    <div class="view">
        <div class="page-header" id="tou">
            客服聊天
        </div>
        <span id="account">${username}</span>
        <c:forEach items="${allAdmin}" var="item">
            <span hidden class="allAdmin">${item.username},</span>
        </c:forEach>
        <div class="talk_show" id="showMessage">
            <span id="showDate"></span>
            <%--<div class="litalk" ><img src="${path}/resources/upload/li.png" id="liimg"><span id="asay" >你好！</span></div>--%>
            <%--<div class="wangtalk"><img src="${path}/resources/upload/wang.png" id="wangimg"><span id="bsay">你好！</span></div>--%>
        </div>
        <div class="talk_input"  id="words11">


            <textarea class="form-control" placeholder="发送信息..." id="message"></textarea>
            <input type="button"  value="发送" class="op" id="send"/>


        </div>
    </div>


</div>
</body>
<script>
    var allAdmin = $(".allAdmin").text().split(",")
    var tid = allAdmin.filter(function (s) {
        return s && s.trim();
    });
    var status = 0;//接收消息提醒标志，初始化为0，当收到消息并查看时设置为1
    //jquery代码当页面DOM树加载完毕之后触发
    $(function () {
        var websocket;//创建对象，用户连接WebSocket

        if ('WebSocket' in window) {
            var username = $("#account").text()
            console.log("此浏览器支持websocket");
            websocket = new WebSocket("ws://127.0.0.1:8080/OnlineShop/websocketDemo/" + username);
        } else if ('MozWebSocket' in window) {
            alert("此浏览器只支持MozWebSocket");
        } else {
            alert("此浏览器只支持SockJS");
        }
        //连接之后，WebSocket的事件
        websocket.onopen = function (evnt) {
            // $("#msg_a").css("pointer-events", "none");  //阻止点击产生效果
            /* var str = location.href;返回当前显示的文档的完整 URL。
            if(str.split('?')[1]){
                tid = str.split('?')[1].split('=')[1];//分割字符串，返回字符串数组
                   $("#tou").html("链接通道成功!开始与用户" + tid + "聊天！")
            } */
        };
        //接收消息的WebSocket事件
        websocket.onmessage = function (evnt) {
            console.log(evnt)
            var message = JSON.parse(evnt.data);//将数据解析成JSON形式
            var fromName = message.fromName;//对方的账号
            var toName = message.toName;//自己的账号
            var time = new Date(message.date);//对方发送信息时间
            var timeStr = time.toLocaleTimeString();
            if (status == 0) {//这个可以不用实现也行
                // alert("收到来自管理员 " + fromName + "的消息")
                // var msgg = document.getElementById("img_a");
                // msgg.src = "./imgs/msg2.png";
                // var msg1 = document.getElementById("msg_a");
                // msg1.href = "#?id=" + fromName;
                // $("#msg_a").css("pointer-events","auto");  //阻止a标签点击产生效果
            }
            var text = message.text;//获取对方发送来的文本消息
            str = '<div class="wangtalk"><img src="${path}/resources/upload/wang.png" id="wangimg"><span>' + text +'</span></div>' ;
            var Words = document.getElementById("showMessage");
            Words.innerHTML = Words.innerHTML + str;
            scroll();
        };
        //发生错误时，WebSocket的处理事件
        websocket.onerror = function (evnt) {
        };
        //关闭连接时，WebSocket的处理事件
        websocket.onclose = function (evnt) {
            $("#tou").html("与服务器断开了链接!")
        };
        $(".imga").click(function () {
            status = 1;
        });
        //点击发送按钮，响应。
        $('#send').bind('click', function () {
            var str = location.href;//返回当前显示的文档的完整 URL，里面包含着要发送给谁（对方）的id
            // if(str.split('?')[1])
            // 	tid = str.split('?')[1].split('=')[1];//分割字符串，返回字符串数组
            //把自己的username写进去，然后调用send自定义js函数
            var username = $("#account").text()
            send(username);
            $("#tou").html("链接通道成功!开始与客服聊天！")


        });

        function send(username) {
            if (websocket != null) {
                tid.forEach(item => {
                    //json字符串
                    var msg = {
                        fromName: username,//自己的id
                        text: document.getElementById("message").value,//自己要发送的消息
                        toName: item,//对方的id
                        date: Date.now()
                    };

                    /*  var message = document.getElementById('message').value; */
                    //调用WebSocket的send()方法，发送数据给服务器
                    websocket.send(JSON.stringify(msg));//把json数组转换成字符串传到后台

                })

                //定义空字符串
                var str = "";
                var message = document.getElementById("message");
                if(message.value == ""){
                    // 消息为空时弹窗
                    alert("消息不能为空");
                    return;
                }
                str = '<div class="litalk"><img src="${path}/resources/upload/li.png" id="liimg"><span>' + message.value +'</span></div>';
                var Words = document.getElementById("showMessage");
                Words.innerHTML = Words.innerHTML + str;
                var date = document.getElementById("showDate")
                date.innerHTML = new Date(Date.now()).toLocaleTimeString()
                // var div = document.getElementById('msg');
                // //把自己发送的信息显示在div上
                // div.innerHTML = div.innerHTML + "<br/>" + new Date(Date.now()).toLocaleTimeString() + "  " + username + "  " + "<br/>" + document.getElementById("message").value;
                // document.getElementById('message').value = "";
                scroll();
                message.value = ""

            } else {
                alert('未与服务器链接.');
            }
        }

        $("#close").click(function () {
            status = 0;
            $("#msg_a").css("pointer-events", "none");  //阻止点击产生效果
        });
        //点击退出按钮，退出当前账号，并关闭连接
        $("#exit").click(function () {
            close();
        });

        function close() {
            websocket.close();
        }
    });

</script>
</html>